<template>
  <div class='goods_shelves ' :class='"width-"+item.type'>
    <div class='goods_title'>
      <div class='t-left'>
        <div class='t-num'>{{ item.sort }}</div>
        <div class='t-detail'>
          <div class='t-name' v-if='!showMergeCheckbox'>{{ item.name }} - {{ item.code }}</div>
          <div class='t-IP' v-if='!showMergeCheckbox'>IP:{{item.weighIp}}</div>
          <div class='t-tip' v-if='showMergeCheckbox'>不在同一层、不相邻、量程不一致、已绑物料库位不可合并</div>
        </div>
      </div>
      <div class='t-button flex flex-space-around flex-a-center'>
        <el-button class='chamfer-corners-10 mergeBtn' @click='mergeShelf'
                   v-if='!showSplitCheckbox&&!showMergeCheckbox'>
          <span class='btn-middle'>
            <span>合并</span>
            <img class='btn-icon' src='@/assets/warehouse_manage/merge-icon.png' />
          </span>
        </el-button>
        <el-button class='chamfer-corners-10 splitBtn' @click='splitShelf'
                   v-if="!showMergeCheckbox&&!showSplitCheckbox&&item.mergeCount!=='0'">
          <span class='btn-middle'>
            <span>拆分</span>
            <img class='btn-icon' src='@/assets/warehouse_manage/split-icon.png' />
          </span>
        </el-button>
        <el-button class='chamfer-corners-10 merge-f' @click='cancelMerge' v-if='showMergeCheckbox'>取消合并</el-button>
        <el-button class='chamfer-corners-10 merge-f' @click='finishMerge' v-if='showMergeCheckbox'>完成合并</el-button>
        <el-button class='chamfer-corners-10' type='warning' @click='cancelSplit' v-if='showSplitCheckbox'>取消拆分
        </el-button>
        <el-button class='chamfer-corners-10' type='warning' @click='finishSplit' v-if='showSplitCheckbox'>完成拆分
        </el-button>
      </div>
    </div>
    <!-- 智能货架组件 -->
    <smart-shelves
      ref='smartShelves'
      article-width='50px'
      :is-small='item.type===0||item.type===1'
      :shelves='item'
      :showMergeCheckbox='showMergeCheckbox'
      :showSplitCheckbox='showSplitCheckbox'
      @changeMerge='changeMerge'
      @bindItems='bindItems'
      @unBinding='unBinding'/>

  </div>
</template>

<script>
import smartShelves from '@/components/SmartShelves/index.vue'

export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  components: {
    smartShelves
  },
  data() {
    return {
      shelves: {},
      // 显示合并复选框
      showMergeCheckbox: false,
      //  显示拆分复选框
      showSplitCheckbox: false,
      // 合并/拆分选中的数据
      mergeOrSplitData: [],
      mergeStr: ''

    }
  },
  methods: {
    // 合并
    mergeShelf() {
      this.showMergeCheckbox = true
    },
    // 拆分
    splitShelf() {
      this.showSplitCheckbox = true
    },
    // 取消合并
    cancelMerge() {
      this.showMergeCheckbox = false
      this.mergeOrSplitData=[]
    },
    // 取消拆分
    cancelSplit() {
      this.mergeOrSplitData=[]
      this.showSplitCheckbox = false
    },
    // 完成合并
    finishMerge() {
      if (this.mergeOrSplitData.length === 0) {
        this.$message({
          message: '请选择要合并的库位',
          type: 'warning'
        })
        return
      }
      if (this.mergeOrSplitData.length === 1 ) {
        this.$message({
          message: '请至少选择两个库位进行合并',
          type: 'warning'
        })
        return
      }
      // this.showMergeCheckbox = false
      this.$emit('openPromptDialog', { title: '合并提示', index: this.index,type:1, data: this.mergeOrSplitData, mergeStr: this.mergeStr })
    },
    finishMerge2() {
      this.mergeOrSplitData=[]
      this.showMergeCheckbox = false
      this.showSplitCheckbox = false
    },
    // 完成拆分
    finishSplit() {
      if (this.mergeOrSplitData.length === 0) {
        this.$message({
          message: '请选择要拆分的库位',
          type: 'warning'
        })
        return
      }
      // this.showSplitCheckbox = false
      this.$emit('openPromptDialog', { title: '拆分提示', index: this.index,type:2,  data: this.mergeOrSplitData, mergeStr: this.mergeStr })
    },
    // 货架选中的数据
    changeMerge(data,mergeStr) {
      this.mergeOrSplitData = data;
      this.mergeStr = mergeStr;
    },
    // 货架选中的数据
    bindItems(data) {
      this.$emit('openBindItems', data)
    },
    unBinding(data) {
      this.$emit('openUnBinding', data)
    },
    updateShelves() {
      this.$refs.smartShelves.$forceUpdate();
    }
  }
}
</script>
<style lang='scss'>
@import '@/styles/_handle.scss';

.mergeBtn {
  @include background('merge_btn_color');
  @include border_color('merge_btn_color');

  &:hover {
    @include background('merge_btn_color');
  }
}

.merge-f {
  font-size: 18px;
  @include font_color('basic_color');
  font-weight: 600 !important;
}

.splitBtn {
  @include background('split_btn_color');
  @include border_color('split_btn_color');

  &:hover {
    @include background('split_btn_color');
  }
}
</style>
<style scoped lang='scss'>
@import '@/styles/_handle.scss';

.goods_shelves {
  width: 100%;
  margin-bottom: 24px;
  box-sizing: border-box;
  -webkit-clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      100% 100%,
      100% 100%,
      0 100%,
      0 10px
  );
  clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      100% 100%,
      100% 100%,
      0 100%,
      0 10px
  );

  .goods_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include background('warehouse_top_bg_color');
    border: 2px solid;
    border-image: linear-gradient(
        270deg,
        rgba(14, 255, 140, 0),
        rgba(14, 255, 140, 1),
        rgba(14, 255, 140, 0)
    ) 2 2;
    padding: 7px 0 7px 7px;
    width: 100%;

    .t-left {
      display: flex;
      align-items: center;
      flex: 1;

      .t-num {
        flex-shrink: 0;
        width: 54px;
        height: 58px;
        line-height: 58px;
        font-size: 18px;
        text-align: center;
        margin-right: 10px;
        padding-left: 15px;
        @include font_color('warehouse_top_num_color');
        @include background-image('warehouse_num_bg_color');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        font-weight: 600;
      }

      .t-detail {
        flex: 1;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .t-tip {
          font-size: 16px;
          font-weight: 400;
        }

        .t-name {
          width: 100%;
          font-size: 24px;
          // 文字超出隐藏
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .t-IP {
          color: rgba(246, 246, 246, 0.40);
          font-size: 18px;
        }
      }
    }

    .t-button {
      width: 240px;

      .chamfer-corners-10 {
        color: #fff;
        font-size: 18px;
        text-align: center;

        .btn-middle {
          display: flex;
          align-items: center;

          .btn-icon {
            margin-left: 4px;
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}

.width-0 {
  width: 49%;
}

.width-1 {
  width: 49%;
}

.width-2 {
  width: 100%;
}
</style>
